import React, { useCallback, useState, memo } from "react";
// memo是一个高阶组件，给函数组件用的，作用和类组件的PureComponent完全一样
// 只要传进来的props或者自己的state不变，就不会重新渲染

const Child = memo(() => {
  console.log("child render");
  return <div>child组件</div>;
});

const App = () => {
  const [count, setCount] = useState(1);

  // useCallback是用来做函数缓存的
  // 目的就是让函数在更新前后的地址保持不变
  // 第一个参数是回调函数，第二个参数是依赖数组

  // 当函数需要当作自定义事件进行传递的时候，最好要加上useCallback
  // 可以做性能优化，防止子组件的不必要更新
  const fn = useCallback(() => {
    console.log(123);
  }, []);
  // const fn = useMemo(
  //   () => () => {
  //     console.log(123);
  //   },
  //   []
  // );

  return (
    <>
      <h2>useCallBack</h2>
      <p>count: {count}</p>
      <button
        onClick={() => {
          setCount((v) => v + 1);
        }}
      >
        btn
      </button>
      <Child onFn={fn} />
    </>
  );
};

export default App;

// import React, { PureComponent, Component } from "react";

// class Child extends PureComponent {
//   state = {};
//   render() {
//     console.log("child render");
//     return <div>child子组件 - {this.props.count}</div>;
//   }
// }

// // const obj = { color: "red" };
// class App extends Component {
//   state = {
//     count: 10,
//   };
//   fn = () => {
//     this.setState({
//       count: 10,
//     });
//   };
//   obj = { color: "red" };
//   fn2 = () => {
//     console.log(123);
//   };
//   render() {
//     console.log("app render");
//     return (
//       <>
//         <h2>类组件的写法</h2>
//         <button onClick={this.fn}>btn</button>
//         <Child count={this.state.count} style={this.obj} onFn={this.fn2} />
//       </>
//     );
//   }
// }

// export default App;
